---
title: Contenu communautaire
description: Découvrez les guides, articles et vidéos produits par la communauté pour vous aider à apprendre et à créer avec Starlight !
---

:::tip[Ajoutez le vôtre !]
Avez-vous produit du contenu sur Starlight ?
Ouvrez une PR ajoutant un lien à cette page !
:::

import { CardGrid, LinkCard } from '@astrojs/starlight/components';

## Articles et revues

Voici une collection de publications et d'articles pour en apprendre plus sur Starlight et les expériences d'autres personnes :

<CardGrid>
	<LinkCard
		href="https://devm.io/open-source/starlight-astro"
		title="Génération de sites statiques avec Starlight"
		description="« Aucune idée n'est trop grande ou trop petite lors de la conception de composants » — une entrevue avec Chris Swithinbank, responsable de Starlight"
	/>
	<LinkCard
		href="https://frontendatscale.com/blog/hybrid-frontend-architecture/"
		title="Une architecture frontend hybride avec Astro et Starlight"
		description="Maxi Ferreira et Ben Holmes construisent un site de documentation avec Starlight, TinaCMS et une aire de test interactive avec authentification pour une API."
	/>
	<LinkCard
		href="https://www.olets.dev/posts/comparing-docs-site-builders-vuepress-vs-starlight/"
		title="Comparaison des générateurs de sites de documentation : VuePress contre Starlight"
		description="Comment les deux frameworks se comparent-ils ?"
	/>
	<LinkCard
		href="https://astro.build/case-studies/wp-engine/"
		title="Étude de cas : Réduction des coûts de développement"
		description="Comment WP Engine a réduit ses coûts de développement par plus de 50 % avec Astro Starlight."
	/>
	<LinkCard
		href="https://maciekpalmowski.dev/blog/building-a-documentation-site-using-astro-starlight/"
		title="Construction d'un site de documentation avec Astro Starlight"
		description="Maciek Palmowski décrit comment Patchstack a migré sa documentation vers Starlight"
	/>
	<LinkCard
		href="https://blog.cloudflare.com/open-source-all-the-way-down-upgrading-our-developer-documentation/"
		title="Open source du début à la fin"
		description="Comment Cloudflare a utilisé Starlight pour mettre à jour sa documentation pour les développeurs."
	/>
	<LinkCard
		href="https://starlight-changelog.netlify.app/"
		title="Starlight Changelog"
		description="Consulter l'ensemble des versions du paquet @astrojs/starlight sur une seule magnifique page."
	/>
	<LinkCard
		href="https://hideoo.dev/notes/contributing-to-starlight"
		title="Contribuer à Starlight"
		description="Mon expérience personnelle et mes suggestions pour contribuer à des projets open source comme Starlight."
	/>
</CardGrid>

## Recettes et guides

Les recettes sont généralement des guides courts et ciblés qui guident un lecteur à travers l'exécution d'un exemple de travail pour une tâche spécifique. Les recettes sont un excellent moyen d'ajouter de nouvelles fonctionnalités ou un nouveau comportement à votre projet Starlight en suivant des instructions étape par étape ! D'autres guides peuvent expliquer des concepts liés à un domaine spécifique, comme l'utilisation d'images ou l'utilisation de MDX.

Explorez le contenu communautaire produit par les utilisateurs de Starlight :

<CardGrid>
	<LinkCard
		href="https://www.webpro.nl/scraps/versioned-docs-with-starlight-and-vercel"
		title="Documentation versionnée avec Starlight et Vercel"
		description="Un guide pour mettre en place des versions séparées d'une documentation pour chaque version majeure d'un projet."
	/>
	<LinkCard
		href="https://hideoo.dev/notes/starlight-heading-links"
		title="Ajouter des liens aux titres de Starlight"
		description="Un guide pour utiliser un module d'extension rehype pour partager des liens vers des sections spécifiques de votre documentation."
	/>
	<LinkCard
		href="https://blog.otterlord.dev/posts/starlight-sponsors/"
		title="Ajouter des sponsors à votre site Starlight"
		description="Un guide pour mettre en place un composant de sponsors personnalisé dans la barre latérale de votre documentation."
	/>
	<LinkCard
		href="https://hideoo.dev/notes/starlight-og-images"
		title="Ajouter des images Open Graph à Starlight"
		description="Un guide pour générer des images sociales et les balises de métadonnées correspondantes pour vos pages."
	/>
	<LinkCard
		href="https://hideoo.dev/notes/starlight-third-party-icon-sets"
		title="Utiliser des ensembles d'icônes tiers dans Starlight"
		description="Un guide pour utiliser unplugin-icons pour étendre la sélection d'icônes disponibles pour Starlight."
	/>
	<LinkCard
		href="https://hideoo.dev/notes/starlight-custom-html-head"
		title="Éditer l'en-tête HTML des pages Starlight"
		description="Apprenez à ajouter du contenu d'en-tête commun tel que des analyses d'audience Web, des polices et des scripts."
	/>
	<LinkCard
		href="https://dev.to/mrrobot/publishing-documentation-with-astro-starlight-691"
		title="Publier une documentation avec Astro Starlight"
		description="Démarrer une documentation avec Starlight."
	/>
	<LinkCard
		href="https://events-3bg.pages.dev/jotter/starlight/guide/"
		title="Utiliser les transitions de vue (view transitions)"
		description="Obtenir l'apparence et ressenti d'une application monopage (SPA) grâce à la prise en charge des transitions de vue de Bag of Tricks."
	/>
	<LinkCard
		href="https://jamcomments.com/posts/structured-data-with-starlight"
		title="Ajout de données structurées aux pages Starlight"
		description="Apprenez à créer des données structurées JSON-LD dynamiques pour vos pages de documentation."
	/>
	<LinkCard
		href="https://starlight-examples.netlify.app/"
		title="Exemples Starlight"
		description="Collection de ressources StackBlitz démontrant par la pratique comment mettre en place diverses fonctionnalités dans des sites de documentation Starlight."
	/>
	<LinkCard
		href="https://hideoo.dev/notebooks/starlight-plugins-by-example"
		title="Modules d'extension Starlight par l'exemple"
		description="Une collection de notes et d'exemples sur les modules d'extension Starlight et techniques couramment utilisées pour les construire."
	/>
	<LinkCard
		href="https://blog.trueberryless.org/blog/starlight-progress-indicator/"
		title="Ajouter un indicateur de progression de lecture"
		description="Découvrez comment ajouter une barre de progression de lecture horizontale à votre site Starlight."
	/>
	<LinkCard
		href="https://blog.trueberryless.org/blog/starlight-sidebar-whitespace/"
		title="Appliquer des styles personnalisés à votre barre latérale Starlight"
		description="En utilisant un peu de CSS pour ajuster les polices, les couleurs et d'autres éléments de la barre latérale de Starlight."
	/>
	<LinkCard
		href="https://blog.trueberryless.org/blog/starlight-dropdown-and-list-together/"
		title="Starlight Topics : menu déroulant de rubriques sur mobile, liste sur ordinateur"
		description="Combinez deux modules d'extension pour profiter du meilleur des deux mondes sur ordinateur et appareils mobiles."
	/>
	<LinkCard
		href="https://blog.trueberryless.org/blog/starlight-autogenerate-whole-sidebar/"
		title="Agencement de la barre latérale de Starlight avec un middleware"
		description="Utilisez un middleware de routage pour contrôler l'agencement de la barre latérale et les étiquettes de groupe, inspiré des conventions de Nuxt Content."
	/>
	<LinkCard
		href="https://hideoo.dev/notes/starlight-custom-social-links"
		title="Ajouter des liens vers les réseaux sociaux avec des icônes personnalisées à Starlight"
		description="Découvrez comment utiliser des icônes personnalisées pour les liens vers les réseaux sociaux dans l'en-tête de votre site web Starlight."
	/>
	<LinkCard
		href="https://hideoo.dev/notes/starlight-paste-images-with-visual-studio-code"
		title="Coller des images dans les pages Starlight avec Visual Studio Code"
		description="Améliorez votre manière de travailler avec Starlight en collant des images dans vos pages de documentation à l'aide de Visual Studio Code."
	/>
	<LinkCard
		href="https://hideoo.dev/notes/starlight-add-diagrams-using-d2"
		title="Ajouter des diagrammes à votre documentation Starlight à l'aide de D2"
		description="Apprenez à utiliser D2 pour ajouter des diagrammes à votre documentation Starlight."
	/>
	<LinkCard
		href="https://hideoo.dev/notes/starlight-og-images-cloudinary-astro-sdk"
		title="Générer des images Open Graph pour Starlight à l'aide du SDK Astro de Cloudinary"
		description="Découvrez comment utiliser le SDK Astro de Cloudinary pour générer des images Open Graph pour votre site web de documentation Starlight."
	/>
	<LinkCard
		href="https://hideoo.dev/notes/starlight-list-recent-github-releases"
		title="Lister les dernières versions publiées sur GitHub dans Starlight à l'aide de l'API Content Layer d'Astro"
		description="Découvrez comment utiliser l'API Content Layer d'Astro pour lister les dernières versions publiées sur GitHub d'un projet Starlight."
	/>
	<LinkCard
		href="https://hideoo.dev/notes/starlight-sitewide-banner"
		title="Ajouter une bannière pour l'ensemble du site avec Starlight"
		description="Découvrez comment créer une bannière pour l'ensemble du site grâce à la fonctionnalité intégrée de bannière par page de Starlight."
	/>
</CardGrid>

## Contenu vidéo

Découvrez des vidéos et des chaînes avec du contenu Starlight, y compris des flux en direct et du contenu éducatif.

import YouTubeGrid from '~/components/youtube-grid.astro';

### Vidéos officielles

<YouTubeGrid
	videos={[
		{
			href: 'https://www.youtube.com/watch?v=5u0Ds7wzUeI',
			title: 'Starlight par Astro',
			description: 'Regardez la vidéo de lancement officielle de Starlight',
		},
		{
			href: 'https://www.youtube.com/watch?v=j8K-ESJF814',
			title: 'Un an de Starlight !',
			description:
				"Sarah parle du thème de documentation communautaire d'Astro",
		},
	]}
/>

### Vidéos et flux communautaires

<YouTubeGrid
	videos={[
		{
			href: 'https://www.youtube.com/shorts/zjOWezSzd18',
			title: '🌟 MOINS DE 1 MINUTE',
			description:
				"Regardez Ben créer un nouveau site Starlight en moins d'une minute !",
		},
		{
			href: 'https://www.youtube.com/watch?v=sF6UcV3moZg',
			title: 'Construire une documentation avec Starlight et Astro',
			description:
				'Regardez Chris et Alex plonger au cœur de Starlight dans Coder avec CodingCat.dev',
		},
		{
			href: 'https://www.youtube.com/watch?v=sWkkHbwDeQc',
			title: 'Astro Starlight',
			description: 'Introduction à Starlight en moins de une minute',
		},
		{
			href: 'https://www.youtube.com/watch?v=-Ki-1E5gNCk',
			title:
				"Modèle de documentation Astro Starlight (créer des documentations personnalisées d'application !)",
			description:
				"Créez un nouveau site Starlight prêt à l'emploi en environ 5 minutes",
		},
		{
			href: 'https://www.youtube.com/watch?v=12o7WxjAxjM',
			title:
				'Inclure une documentation Starlight dans un projet Next.js avec des proxys',
			description:
				"Configurer un projet Starlight dans un sous-répertoire au sein d'un site Next.js",
		},
		{
			href: 'https://www.youtube.com/watch?v=5pq80drDrNs',
			title:
				"J'ai recréé la documentation de Shadcn en 30 minutes avec cet outil incroyable",
			description:
				"Dans cette vidéo, je passe en revue ce qui rend Starlight si cool et pourquoi vous voudriez l'essayer avec votre prochain projet.",
		},
		{
			href: 'https://www.youtube.com/watch?v=Q1E4Gkt63ko',
			title: 'Astro Starlight et emoji-blast avec Chris Swithinbank',
			description:
				"Chris, le créateur du thème de documentation Starlight pour Astro, m'aide à le configurer pour le nouveau site web d'emoji-blast. 🌟 🎇",
		},
	]}
/>
